<!--认证证书-->
<template>
  <component>
<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :width="width" :height="height" viewBox="0 0 2480 3485">
  <text id="_12345" data-name="12345" class="cls-3" x="1880" y="241.125">{{reportData.reportId}}</text>

  <text id="奥迪A4" class="cls-8" x="846.542" y="1040.221">{{reportData.car.carSeries}}</text>
  <text v-if='reportData.car.carType?.length < 32' id="_2018款_A4L_TSFI舒适型" data-name="2018款 A4L TSFI舒适型" class="cls-8" x="847.543" y="1170.22">{{reportData.car.carType}}</text>
  <text v-else id="_2018款_A4L_TSFI舒适型" data-name="2018款 A4L TSFI舒适型" class="cls-8" :style='caculateWidth(1,reportData.car.carType)' x="847.543" y="1170.22">{{reportData.car.carType}}</text>
  <text id="黑色" class="cls-8" x="846.544" y="1431.221">{{reportData.car.color}}</text>
  <text id="WSAN_0928324" data-name="WSAN******0928324" class="cls-8" x="847.543" y="1302.22">{{reportData.car.vin}}</text>

  <text id="张XX" class="cls-11" x="1629.287" y="2813.785">{{reportData.test.tester}}</text>
  <text id="_2021年12月10日" data-name="2021年12月10日" class="cls-11" x="1632.288" y="2892.785">{{reportData.test.testDate}}</text>

  <foreignObject x="740" y="2600" width="300" height="300">
    <QRCodeVue3
      class='qrcode'
      :width="300"
      :height="300"
      :value="qrCodeUrl"
      :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
      :imageOptions="{ hideBackgroundDots: false, imageSize: 0.4, margin: 0 }"
      :dotsOptions="{
          type: 'square',
          color: '#000000',
          gradient: {
            type: 'linear',
            rotation: 0,
            colorStops: [
              { offset: 0, color: '#000000' }
            ],
          },
        }"
      :backgroundOptions="{ color: '#ffffff' }"
      :cornersSquareOptions="{ type: 'square', color: '#000000' }"
      :cornersDotOptions="{ type: undefined, color: '#000000' }"
      fileExt="png"
      myclass="my-qur"
      imgclass="img-qr"
    />
  </foreignobject>
<!--  <path id="形状_909" data-name="形状 909" class="cls-16" d="M55100,3079v-3H7291v3H5510Z" transform="translate(-5160 -500)"/>-->
<!--  <path id="形状_909" data-name="形状 909" class="cls-16" d="M55100,3079v-3H7291v3H5510Z" transform="translate(-5160 -600)"/>-->
</svg>

  </component>
</template>

<script lang='ts'>
import QRCodeVue3 from "qrcode-vue3";
import { defineComponent,PropType,ref } from 'vue'
import { reportData } from '../model/ReportObj'
export default defineComponent ({
  name: 'CertificationCover',
  components: {
    QRCodeVue3
  },
  props: {
    width: {
      type:  String,
      required: true
    },
    height: {
      type:  String,
      required: true
    },
    qrcodeType: {
      type:  String,
      required: true
    },
    reportData: {
      type: Object as PropType<reportData>,
      require: true
    }
  },
  setup (props) {

    let qrCodeUrl = ref("");
     let href = window.location.href;
     if (props.qrcodeType === "standard") {
       if (href.indexOf("?") != -1) {
         let strings = href.split("?");
         qrCodeUrl.value = strings[0]+ "Detail?" + strings[1]
       }else {
         qrCodeUrl.value = href + "Detail"
       }
     } else if (props.qrcodeType === "sanwu") {
       if (href.indexOf("=") != -1) {
         let strings = href.split("=");
         qrCodeUrl.value = process.env.kongfu+"interior/report/attached/best/view/" + strings[1]
       }
     }
    function caculateWidth (type: number,name: string): string {
      let val = "font-size: "
      switch (type) {
        case  1 : val += 5000/2.4/name.length + 'px';break;
        case  2 : val += '0px';break;
      }
      return val;
    }
    return {
      qrCodeUrl,
      caculateWidth
    }
  }
});
</script>

<style scoped>
 .cls-1 {
        opacity: 0.05;
      }

      .cls-2, .cls-3 {
        font-size: 50px;
      }

      .cls-11, .cls-13, .cls-14, .cls-15, .cls-2, .cls-3, .cls-5, .cls-7, .cls-8 {
        fill: #2d2d2d;
      }

      .cls-10, .cls-13, .cls-14, .cls-2, .cls-5 {
        text-anchor: middle;
      }

      .cls-10, .cls-11, .cls-13, .cls-14, .cls-15, .cls-2, .cls-3, .cls-5, .cls-7, .cls-8 {
        font-family: "Source Han Sans CN";
      }

      .cls-4 {
        fill: #16d0ff;
        fill-opacity: 0.15;
        stroke: #3699ff;
        stroke-width: 1px;
        stroke-dasharray: 4 2;
      }

      .cls-16, .cls-4, .cls-6, .cls-9 {
        fill-rule: evenodd;
      }

      .cls-5 {
        font-size: 187.5px;
        font-weight: 700;
      }

      .cls-12, .cls-6, .cls-9 {
        fill: #fabe00;
      }

      .cls-6 {
        stroke: #fabe00;
        stroke-width: 30px;
        filter: url(#filter);
      }

      .cls-7, .cls-8 {
        font-size: 66.667px;
      }

      .cls-10 {
        font-size: 125px;
        fill: #161616;
        font-weight: 500;
      }

      .cls-11, .cls-13, .cls-14 {
        font-size: 58.333px;
      }

      .cls-12, .cls-16 {
        stroke: #2d2d2d;
      }

      .cls-12 {
        stroke-width: 5px;
      }

      .cls-15 {
        font-size: 41.667px;
        font-weight: 300;
      }

      .cls-16 {
        fill: none;
        stroke-width: 2px;
      }

      .cls-17 {
        mix-blend-mode: multiply;
      }
</style>
